<template>
  <div class="width-style article">
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="grid-content">
          <div class="article-title">
            {{entryData.entryName}}
          </div>
          <div class="article-info">
            <span
              >发布时间：{{entryData.publishTime}}</span
            >
            <span>本词条分类：{{entryData.cataName}}</span>
            <!-- <span
              class="edit-article"
              @click="editArticle($store.state.article.artId)"
              >修改文章</span
            > -->
          </div>
          <!-- <div class="link"></div> -->
          <div class="article-content">
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="grid-content content-left">正文：</div>
              </el-col>
              <el-col :span="20">
                <div class="grid-content">
                  <p
                    class="content-text"
                    v-html="entryData.entryContent"
                  ></p>
                </div>
              </el-col>
            </el-row>
            <!-- <el-row :gutter="20">
              <el-col :span="4">
                <div class="grid-content content-left">小编提示：</div>
              </el-col>
              <el-col :span="20">
                <div class="grid-content">
                  <div class="tips">本文很棒哦</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="grid-content content-left">文章类型：</div>
              </el-col>
              <el-col :span="20">
                <div class="grid-content">
                  <div class="type">转载</div>
                </div>
              </el-col>
            </el-row> -->
          </div>
          <!-- 点赞收藏评论分享-->
          <div class="comment">
            <el-popover
              class="share-group"
              placement="top-start"
              width="250"
              trigger="hover"
              slot
            >
              <div class="img-GRCode" style="fontweight: 700">
                扫一扫，分享内容
              </div>
              <qriously :size="138" class="img-GRCode" :value="href" />
              <div class="link-href">
                <el-input
                  v-model="href"
                  :disabled="true"
                  class="href-input"
                  size="small"
                >
                </el-input>
                <el-button type="primary" class="copy-button" @click="copyHref"
                  >复制</el-button
                >
              </div>
              <span class="iconfont icon icon-grey" slot="reference">
                &#xe63e;
              </span>
            </el-popover>
          </div>
          <!-- 反馈 -->
          <div class="correction-all">
            <span class="correction" @click="goFeedBack">内容纠错</span>
            <span class="correction" @click="goFeedBack">板块纠错</span>
          </div>
          <!-- 广告图片 -->
          <!-- <div class="img-show">
            <img src="@/assets/images/logo.jpg" class="img" />
            <img src="@/assets/images/logo.jpg" class="img" />
            <img src="@/assets/images/logo.jpg" class="img" />
          </div> -->
        </div>
      </el-col>
      <el-col :span="6" :offset="6">
        <NewsSection
          :newsList="$store.state.home.newsList"
          style="backgroundcolor: rgba(37, 182, 160, 0.3)"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Comments from "@/components/comments.vue";
import { renderTime } from "@/utils/tools.js";
import {Message} from 'element-ui'
import NewsSection from "@/components/newsSection";
export default {
  layout: "personalCenterLayout",
  components: { Comments, NewsSection },
  data() {
    return {
      test: "",
      imgsrc: "../../assets/images/face.jpg",
      href: "", //当前路径
      isLogin: false, //是否登录
      //是否点赞
      isGood: false,
      //是否收藏
      isCollect: false,
      //输入的评论
      commentForm: {
        content: "",
      },
      user: {
        userName: "",
        userId: "",
        avatar: "",
      },
    };
  },
  // directives: { clickoutside },
  methods: {
    // 去反馈中心
    goFeedBack() {
      if (this.$cookies.get(this.$api.TOKENKEY)) {
        let link = this.$router.resolve({
          path: "/feedback",
        });
        window.open(link.href, "_blank");
      } else {
        Message({
          message: "未登录或者登录状态已过期，清重新登录",
          type: "error",
          duration: 1000,
        });
      }
    },
    //复制链接
    copyHref() {
      this.$copyText(this.href);
    },
  },
  async asyncData({ app, store, route }) {
    let entryId=route.query.entryId
    console.log(typeof(entryId));
    if (app.$cookies.get(app.api.TOKENKEY)) {
      //写入token
      store.commit("user/SET_LOGIN", true);
      let userRes = await app.api.reqUserInfo({});
      if (userRes.code === 200) {
        store.commit("user/SET_AVATAR", app.api.BASEURL + userRes.user.avatar);
        store.commit("user/SET_USERID", userRes.user.userId);
        store.commit("user/SET_USERNAME", userRes.user.userName);
      }
    }
    //获取词条
    let entryRes,entryData
    entryRes = await app.api.reqEntry(entryId);
    console.log(entryRes);
    if (entryRes.code === 200) {
      entryData = entryRes.data;
      entryData.publishTime = renderTime(entryData.publishTime);
    }
    //获取新闻列表
    let newsRes = await app.api.reqNews();
    if (newsRes.code === 200) {
      //更改数组中的时间格式，图片地址
      for (let item of newsRes.rows) {
        item.publishTime = renderTime(item.publishTime);
        item.thumbnail = app.api.BASEURL + item.thumbnail;
      }
      store.commit("home/SETNEWSLIST", newsRes.rows);
    }
    return {
      entryId,
      entryData,
    };
  },
  mounted() {
    this.href = window.location.href;
  },
};
</script>

<style scoped lang="less">
.green {
  color: @themeColor;
}
.mention {
  font-size: 18px;
  padding-top: 10px;
  margin-bottom: 20px;
  font-weight: 700;
}
.el-popover {
  text-align: center;
  margin-right: 5px;
  .img-GRCode {
    // width: 150px;
    // height: 150px;
    text-align: center;
  }
  .copy-link {
    cursor: pointer;
    text-align: center;
    &:hover {
      color: @themeColor;
    }
  }
  .link-href {
    text-align: center;
    .href-input {
      width: 150px;
    }
    .copy-button {
      margin-top: 5px;
      width: 50px;
      height: 25px;
    }
  }
}
.icon-grey {
  color: #c1c1c1;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.article {
  padding-top: 20px;
  margin-bottom: 20px;
  .article-title {
    font-size: 26px;
  }
  .article-info {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    margin-top: 40px;
    margin-bottom: 30px;
    .edit-article {
      cursor: pointer;
      font-weight: 700;
      &:hover {
        color: @themeColor;
      }
    }
  }
  // .link {
  //   margin-top: 20px;
  //   text-align: right;
  //   .icon {
  //     font-size: 24px;
  //     cursor: pointer;
  //   }
  //   .icon-weibo {
  //     font-size: 24px;
  //     &:hover {
  //       color: #f56467;
  //     }
  //     &::before {
  //       display: none;
  //     }
  //   }
  //   .icon-weixin {
  //     &:hover {
  //       color: #3fcf77;
  //     }
  //     &::before {
  //       display: none;
  //     }
  //   }
  //   .icon-qq {
  //     &:hover {
  //       color: #369bce;
  //     }
  //   }
  // }
  .article-content {
    .key-word-all {
      text-align: left;
      .key-word {
        padding: 5px;
        border-radius: 5px;
        font-size: 14px;
      }
    }
    .content-left {
      text-align: right;
      font-size: 14px;
    }
    .content-text {
      text-align: left;
      font-size: 16px;
    }
    .tips {
      font-size: 14px;
      text-align: left;
    }
    .type {
      font-size: 14px;
      text-align: left;
    }
  }
  .comment {
    text-align: right;
    border-bottom: 1px solid @themeColor;
    .icon {
      font-size: 24px;
      cursor: pointer;
      &:hover {
        color: @themeColor;
      }
    }
    .icon-good {
      font-size: 28px;
    }
    .icon-green {
      color: @themeColor;
    }
    .good-group {
      margin-right: 20px;
      font-size: 14px;
      color: #c1c1c1;
    }
    .comment-group {
      font-size: 14px;
      color: #c1c1c1;
      margin-right: 20px;
    }
    .icon-comment {
      margin-right: 5px;
    }
    .collect-group {
      margin-right: 20px;
      font-size: 14px;
      color: #c1c1c1;
      .icon-collect {
        margin-right: 5px;
      }
    }
    .img-GRCode {
      width: 10px;
      height: 150px;
    }
    .share-group {
      margin-right: 5px;
      font-size: 28px;
    }
  }
  .input-comment {
    margin-bottom: 20px;
    margin-top: 20px;
    border-bottom: 1px solid #dcdfe6;
    padding-bottom: 20px;
    .comment-title {
      font-size: 18px;
      text-align: left;
      margin-top: 10px;
      padding-top: 10px;
      margin-bottom: 20px;
    }
    .img-face {
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }
    .submit-comment {
      width: 50px;
      height: 30px;
    }
  }
  .correction-all {
    text-align: right;
    margin-top: 30px;
    .correction {
      color: @themeColor;
      padding-right: 20px;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .img-show {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .img {
      width: 200px;
      height: 150px;
    }
  }
  .article-ranking {
    .article-ranking-title {
      font-size: 18px;
      padding-bottom: 10px;
    }
    .article-ranking-all {
      padding: 5px;
      background: rgba(37, 182, 160, 0.3);
      .article-ranking-content {
        margin-top: 10px;
        .icon-point {
          color: #e1e1e1;
        }
        .article-ranking-text {
          display: inline-block;
          width: 185px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: bottom;
          cursor: pointer;
          &:hover {
            color: @themeColor;
          }
        }
        .icon-hot {
          margin-left: 10px;
          color: #ed4c52;
        }
        .hot-number {
          font-size: 14px;
        }
      }
    }
  }
}
</style>